$(function() {
	loadRoles();
	refresh();
});
function refresh() {
	if (window.errorMsg) {
		$("#alert-warning").html(window.errorMsg).removeClass("hidden").hide()
				.fadeIn("slow");
		$("#alert-warning").fadeOut(5000);
	}
	validationOption = {
		rules : {
			username : {
				minlength : 2,
				maxlength : 20,
				required : true
			},
			nickname : {
				minlength : 2,
				maxlength : 20,
				required : true
			},
			roleName : {
				required : true
			}
		},
		highlight : function(element) {
			$(element).closest('.form-group').addClass('has-error');
		},
		unhighlight : function(element) {
			$(element).closest('.form-group').removeClass('has-error');
		},
		errorElement : 'span',
		errorClass : 'help-block',
		errorPlacement : function(error, element) {
			if (element.parent('.input-group').length) {
				error.insertAfter(element.parent());
			} else {
				error.insertAfter(element);
			}
		}

	};
	$('#addForm').validate(validationOption);
	$('#editForm').validate(validationOption);
	var mytable = $('#user')
			.DataTable(
					{
						"processing" : true,
						"serverSide" : true,
						"dom" : '<"top"f>tr<"bottom"ip>',
						// "deferRender" : true,
						"order" : [ [ 2, "desc" ] ],
						"stateSave" : true,
						"ajax" : {
							"url" : window.basePath + "user/list",
							"type" : "POST"
						},
						"language" : {
							"zeroRecords" : "empty list!",
							"infoEmpty" : "No records available",
							"infoFiltered" : "(filtered from _MAX_ total records)"
						},
						"columnDefs" : [
								{
									"targets" : [ 0 ],
									"visible" : false,
								},
								{
									"targets" : [ 1 ],
								},
								{
									"targets" : [ 2 ],
								},
								{
									"targets" : [ 3 ],
								},
								{
									"targets" : [ 4 ],
								},
								{
									"targets" : -1,
									"data" : null,
									"orderable" : false,
									"defaultContent" : "<button type='button' class='btn btn-success btn-sm'>edit</button>&nbsp;<button type='button' class='btn btn-danger btn-sm'>delete</button>"
								} ],
					});

	$("#user tbody").on("click", "button", function() {
		var data = mytable.row($(this).parents('tr')).data();
		if ($(this).hasClass('btn-success')) {
			showEditModal(data[0]);
		} else if ($(this).hasClass('btn-danger')) {
			showDeleteModal(data[0]);
		}
	});
	$("#addUser").click(function() {
		$("#createUserModal").modal('show');
	});

}
function showDeleteModal(id) {
	$("#idD").val(id);
	$('#deleteUserModal').modal('show');
}

function showEditModal(id) {
	target = window.basePath + "user/find/" + id;
	$.ajax({
		url : target,
		success : function(data) {
			$("#idE").val(data.id);
			$("#usernameE").val(data.username);
			$("#nicknameE").val(data.nickname);
			$("#edit-menu li a").each(
					function(index) {
						dataValue = $(this).attr("dataValue");
						if (dataValue == data.roleId) {
							$("#editDropDownBtn").text(data.roleName).append(
									'<span class="caret"></span>');
							$("#roleIdE").val(data.roleId);
						}
					});
			$('#editUserModal').modal('show');
		}
	});

}
function loadRoles() {
	target = window.basePath + "role/list";
	$
			.ajax({
				url : target,
				success : function(data) {
					menus = $("#dropdown-menu");
					options = "";
					for ( var i = 0; i < data.length; i++) {
						options += "<li role='presentation'><a role='menuitem' dataValue='"
								+ data[i].id
								+ "' tabindex='-1' href='#' data-toggle='dropdown'>"
								+ data[i].role + "</option>";
					}
					menus.empty();
					$(".dropdown-menu").append(options);
					target = $("#add-menu li a:eq(0)");
					$("#addDropDownBtn").text(target.text() + " ").append(
							'<span class="caret"></span>');
					$("#roleId").val(target.attr("dataValue"));
					$("#add-menu li a").click(
							function() {
								$('#roleId').val($(this).attr("dataValue"));
								$("#addDropDownBtn").text($(this).text() + " ")
										.append('<span class="caret"></span>');
							});

					$("#edit-menu li a").click(
							function() {
								$('#roleIdE').val($(this).attr("dataValue"));
								$("#editDropDownBtn")
										.text($(this).text() + " ").append(
												'<span class="caret"></span>');
							});

				}
			});
}